<template>
  <!--商品单项，添加单击事件-->
  <div class="good-item" @click="goToDetail(id)">
    <!--商品图片，赋值cover-->
    <img :src="cover" alt="">
    <!--商品描述-->
    <div class="good-desc">
      <!--商品名称-->
      <div class="title">{{ name }}</div>
      <!--商品价格-->
      <div class="price">￥{{ price }}</div>
    </div>
  </div>
</template>
<script>
import { useRoute, useRouter } from 'vue-router'


export default {
  
  props: {
    //商品id
    id: {
      type: Number,
      default: ''
    },
    //图片参数
    cover: {
      type: String,
      default: ''
    },
    //商品名称
    name: {
      type: String,
      default: ''
    },
    //商品价格
    price: {
      type: String,
      default: ''
    },
    //跳转方法
    goToDetail: {
      type: Function,
      default: () => {}
    }
  },
  setup(props, ctx){
    const router = useRouter();
    //单击事件
    const goToDetail = (id) => {
      //触发传入组件的goToDetail 事件，并将id通过emit的第2个参数传给父组件
      ctx.emit('goToDetail', id)
      router.push({name:'ProductDetail', params:{id:id}})
    }
    return {
      goToDetail
    }
  }
}
</script>
<style lang="less" scoped>
@import '../theme/custom';
.good-item{
  box-sizing: border-box;
  width: 50%;
  border-bottom: 1PX solid #e9e9e9;
  padding: 10px 10px;
  img {
    display: block;
    width: 120px;
    margin: 0 auto;
  }
  .good-desc {
    text-align: center;
    font-size: 14px;
    padding: 10px 0;
    .title{
      color: #222333;
    }
    .price{
      color: @primary;
    }
  }
  &:nth-child(2n + 1) {
    border-right: 1PX solid #e9e9e9;
  }
}
</style>